<template>
  <div class="goodlist">
    <div class="goodlist-item" v-for="(item, index) in goodList" @click="goDetail(item.id)">
      <div><img :src="item.imgUrl" alt=""></div>
      <h3>{{ item.title }}</h3>
      <p>{{ item.price }}</p>
    </div>
  </div>
</template>

<script>
export default {
  name: 'goodlist',
  props: {
    goodList: {
      type: Array
    }
  },
  methods: {
    goDetail(id) {
      this.$router.push(`/detail/${id}`)
    }
  },
}
</script>

<style lang='less' scoped>
.goodlist {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  padding: 0 2px;
  background-color: #fff;

  .goodlist-item {
    width: 48%;

    img {
      width: 100%;
    }

    span {
      color: #b0352f;
      font-size: 17px;
    }

    h3 {
      font-size: 16px;
      font-weight: normal;
      margin: 5px 0;
    }
  }
}
</style>